import React from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import SideMenu from '../../components/sandbox/SideMenu'
import TopHeader from '../../components/sandbox/TopHeader'
import Home from './home/Home'
import NoPermission from './nopermission/NoPermission'
import RightList from './right-manage/RightList'
import RoleList from './right-manage/RoleList'
import UserList from './user-manage/UserList'
//css
import './NewsSandBox.css'
//antd
import { Layout } from 'antd';
const {Content} = Layout

export default function NewsSandBox() {
  return (
    <Layout>
      <SideMenu></SideMenu>
      <Layout className="site-layout">
        <TopHeader></TopHeader>
        {/* 子路由 */}
        {/* 内容区域 */}
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            overflow:'auto'  //溢出显示滚动条
          }}
        >
          <Switch>
            <Route path='/home' component={Home}></Route>
            <Route path='/user-manage/list' component={UserList}></Route>
            <Route path='/right-manage/role/list' component={RoleList}></Route>
            <Route path='/right-manage/right/list' component={RightList}></Route>
            {/* 重定项  ,exact 精确 */}
            <Redirect from='/' to='/home' exact />
            <Route path='*' component={NoPermission} />
          </Switch>
        </Content>
      </Layout>
    </Layout>
  )
}
